<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<link href="<%=basePath%>/css/idangerous.swiper.css" rel="stylesheet" />
<link href="<%=basePath%>/css/skin.css" rel="stylesheet" />
<link href="<%=basePath%>/css/main.css" rel="stylesheet" />
<link href="<%=basePath%>/css/sweetalert.css" rel="stylesheet" />
<link href="<%=basePath%>/weui/weui.min.css" rel="stylesheet" />

<script type="text/javascript" src="<%=basePath%>/js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/weui/jquery-weui.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/idangerous.swiper-2.1.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/jquery.ocupload.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/sweetalert.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/checkMoobile.js"></script>
<title>爱粮节粮进万家</title>
<style>

.ajaxloading {
	margin: 10px;
	background: #fff;
	color: #44b549;
	text-align: center;
	font-size: 9pt;
	line-height: 30px;
}

.baiyi-vote-join-warp {
	position: relative;
	margin: 10px;
	padding: 10px;
	border: 1px solid #ff2946;
	border-radius: 10px;
	/* background-color: #fff; */
}

.tip {
	padding: 10px 0;
	text-align: center;
	font-size: 1.4rem;
}

.form-group {
	display: -webkit-box;
	margin-bottom: 8px;
}

.form-group label {
	display: inline-block;
	width: 5pc;
	font-weight: 700;
	font-size: 14px;
}

.form-group label .tips {
	font-size: 12px;
	color: #ccc;
}

.form-group .control {
	-webkit-box-flex: 1;
}

.form-group .control input, .form-group .control textarea {
	display: block;
	padding: 6px 0;
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 4px;
	background-color: #fff;
	background-image: none;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	color: #555;
	vertical-align: middle;
	font-size: 14px;
	-webkit-transition: border-color ease-in-out .15s, box-shadow
		ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-group .control textarea {
	outline: 0;
	resize: none;
}

.form-group .control .add {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 50px;
	border: 2px dashed #000;
	vertical-align: middle;
	text-align: center;
}

.form-group .control .preview {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 50px;
	border: 2px dashed #000;
	vertical-align: middle;
	text-align: center;
	margin-right: 5px;
}

.form-group .control .preview .close {
	position: absolute;
	top: -7px;
	right: -7px;
	display: block;
	width: 14px;
	height: 14px;
	background: #fff;
	border-radius: 7px;
	color: #fff;
	font-size: 12px;
	text-align: center;
	vertical-align: middle;
	font-family: Arial;
}

.form-group .control .preview img {
	display: block;
	width: 50px;
	height: 50px;
}

.form-group .control .add:before {
	position: absolute;
	top: 18px;
	left: 23px;
	display: block;
	width: 4px;
	height: 14px;
	background: #000;
	content: "";
}

.form-group .control .add:after {
	position: absolute;
	top: 23px;
	left: 18px;
	display: block;
	width: 14px;
	height: 4px;
	background: #000;
	content: "";
}

.btn-bm {
	display: inline-block;
	padding: 5px 0;
	width: 100%;
	border-radius: 5px;
	background-color: #ff2946;
	color: #fff;
	text-align: center;
}
.baiyi-vote-join-warp-title{
	/* background-color: #FFF;  */
	color: #ff2946; 
	text-align: center; 
	border-radius: 5px; 
	/* padding: 5px 0 */
}
</style>
</head>
<body>
	<form name="form1" method="post" action="VoteUpload.aspx?uid=1161&amp;openId=FromUserName&amp;sign=&amp;vid=113" id="form1">
		<div class="baiyi-vote-warp">

			<div class="head" onclick="window.location.href='<%=basePath%>/vote.htm'">
				<img src="<%=basePath%>/images/banner.jpg" alt="" width="100%" />
			</div>
			<div class="baiyi-vote-rule">
				<ul class="clearfix">
					<li><a
						href="<%=basePath%>/voteUpload.htm?openId=${openid}">我要报名</a></li>
					<li><a
						href="<%=basePath%>/voteRank.htm?openId=${openid}">活动排名</a></li>
					<li><a
						href="http://mp.weixin.qq.com/s?__biz=MzA3ODgzOTc3Nw==&mid=403283436&idx=1&sn=03eb40dc9867348f0b39d01d7cefd238&scene=1&srcid=0401ncY5KNXA4njecFP3valm#rd">奖品介绍</a></li>
				</ul>
			</div>
			<div class="title">
				<div class="baiyi-vote-join-warp-title">参赛报名处</div>
			</div>
			<div class="tip" style="color: #7ba801; font-size: 12px">一个微信号只能报名一次，最多可上传3张图片</div>
				
			<div class="baiyi-vote-join-warp">
				<div class="form-group">
					<h3>个人信息</h3>
				</div>
				<div class="form-group">
					<label>参赛姓名：</label>
					<div class="control">
						<input type="text" id="txtname"  maxlength="4"/>
					</div>
				</div>
				<div class="form-group">
					<label>联系电话：</label>
					<div class="control">
						<input type="text" maxlength="11" id="txtmobile" />
					</div>
				</div>
				<div class="form-group">
					<label>单位/家庭地址：</label>
					<div class="control">
						<textarea style="resize: none;width: 100%;height: 50px;" class="textarea" id="txtaddress"></textarea>
					</div>
				</div>
			</div>
			<div class="baiyi-vote-join-warp">
				<div class="form-group">
					<h3>参赛作品</h3>
					
				</div>
				
				<div class="form-group">
					<div class="tip" style="color: #7ba801; font-size: 12px">参评作品要突出“爱粮节粮进万家”主题，以文字稿件为主，字数控制在100字左右，同时可以配发相应的图片</div>
				</div>
				<div class="form-group">
					<label>标题：</label>
					<div class="control">
						<input type="text" maxlength="11" id="txttitle" />
					</div>
				</div>
				<div class="form-group">
					<label>内容：</label>
					<div class="control">
						<textarea style="resize: none;width: 100%;height: 50px;" class="textarea" id="txtcontent"></textarea>
					</div>
				</div>
<!-- 				<div class="form-group">
					<div class="tip" style="text-align:center;width:100%;color: #7ba801; font-size: 12px">生活小常识的内容以100字左右为宜</div>
				</div> -->
				<div class="form-group">
					<label>上传照片：<span class="tips">(图片大小4M以内)</span></label>
					<div class="control" style="clear:both">
							<div class="add"></div>
							<div id="preview_img" style="display: inline-block"></div>
<!-- 						<div style="width:54px;height:54px;float:left;margin-right:10px">
							<div class="add"></div>
							<div id="preview_img2" style="display: inline-block"></div>
						</div>
						<div style="width:54px;height:54px;float:left;margin-right:10px">
							<div class="add"></div>
							<div id="preview_img3" style="display: inline-block"></div>
						</div> -->
					</div>
				</div>
				<div class="form-group">
					<div class="tip" style="text-align:center;width:100%;color: #7ba801; font-size: 12px">上传最多3个与稿件有关的图片</div>
				</div>
				<!-- 
				<div class="form-group">
					<label>广告宣言：</label>
					<div class="control">
						<textarea id="txtsummary"></textarea>
					</div>
				</div> -->
				<div class="form-group">
					<label></label>
					<div class="control">
						<a class="btn-bm" id="bm">报名</a>
					</div>
				</div>
			</div>
			<div class="baiyi-copyright"></div>
		</div>
	</form>
</body>
<script>
	var count = 0;
	/* var img=""; */
	var img = new Array()
	var loading_asset = '<%=basePath%>/images/loading.gif';
	$(function(){
		if('${error}'=='error'){
			swal({   
				title: "错误",   
						text: "请先关注本微信号！",   
						type: "warning",   
						confirmButtonColor: "#DD6B55",   
						confirmButtonText: "确定",   
						closeOnConfirm: false 
				}, 
				function(){   
					location.href="<%=basePath%>/sub.htm";
				});
			
		}
	})
	function _hideLoading() {
		window.setTimeout(function() {
			var div = document.getElementById('loading');
			if (div)
				div.style.display = 'none';
		}, 250);
	}
	function _showLoading() {
		var div = document.getElementById('loading');
		if (!div) {
			div = document.createElement('div');
			div.style.display = 'none';
			div.id = 'loading';
			div.innerHTML = '<div class="lbk"></div><div class="lcont"><img src="' + loading_asset + '" alt="loading..."/>正在加载...</div>';
			document.querySelector('body').appendChild(div);
		}
		;
		window.setTimeout(function() {
			div.style.top = ($('body').scrollTop + 150) + 'px';
			div.style.display = '';
		}, 150);
	}

	var mySwiper = new Swiper('.swiper-container', {
		calculateHeight : true,
		roundLengths : true,
		loop : true,
		autoplay : 5000
	})

	$(".add")
			.upload(
					{
						name : 'myfiles',
						method : 'post',
						enctype : 'multipart/form-data',
						action : '<%=basePath%>/uploadImg.htm?d='+ new Date(),
						onSelect : function() {
							_showLoading();
							if($('.preview').length>=3){
								swal("已提交3张图片");
							}
						},
						onSubmit : function() {

						},
						onComplete : function(r) {
							
							_hideLoading();
							if (r) {
									var addele='<div class="preview"><img src="<%=basePath%>/upload/'+r+'" class="imglist"/>'
												+'<i class="close">'
												+'<svg style="width:14px;height:14px;" version="1.1" id="图形" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px" height="1024px" viewBox="0 0 1024 1024" enable-background="new 0 0 1024 1024" xml:space="preserve">'
												+'<path class="svgpath" data-index="path_0" fill="#f82626" d="M511.999977 0.51108c-282.48817 0-511.48892 229.00075-511.48892 511.48892s229.00075 511.48892 511.48892 511.48892 511.48892-229.00075 511.48892-511.48892S794.487124 0.51108 511.999977 0.51108zM760.663384 740.18646l-20.476947 20.478993c-6.461128 6.461128-16.941536 6.463174-23.405733 0L511.999977 555.88268 307.217204 760.66443c-6.463174 6.463174-16.942559 6.461128-23.40471 0l-20.47797-20.476947c-6.464197-6.463174-6.464197-16.943582 0-23.406756l204.78175-204.78175L263.335546 307.217227c-6.464197-6.463174-6.462151-16.942559 0-23.40471l20.47797-20.476947c6.463174-6.463174 16.941536-6.463174 23.40471 0L511.999977 468.118343l204.78175-204.782773c6.464197-6.464197 16.941536-6.463174 23.405733 0l20.476947 20.476947c6.462151 6.462151 6.46522 16.940513 0 23.40471L555.881634 512l204.78175 204.78175C767.128604 723.244924 767.128604 733.722263 760.663384 740.18646z" />'
												+'</svg>'
												+'</i>'
												+"</div>";
												
									if($('.preview').length>=3){
										swal("已提交3张图片");
									}
									else{
										$("#preview_img").append(addele);
										img[img.length]=r;
										/* if(img!=""){
											img+=","+r;
										}
										else{img=r;} */
										bindDelete();
									}
							}
						}
					});
	$("#bm")
			.click(
					function() {
						$(".close").empty();
						var itemname = $("#txtname").val();
						var mobile = $("#txtmobile").val();
						var address = $("#txtaddress").val()
						var title = $("#txttitle").val();
						var content = $("#txtcontent").val();
						var imgstr='';
						if (itemname == "") {
							swal("请填写姓名！");
							return false;
						}
						if (utils.checkMobile(mobile).status == false) {
							swal("请填写您常用的手机号码作为联系方式！");
							return false;
						}
						if (address == "") {
							swal("请填写单位或家庭地址！");
							return false;
						}
						if ($.trim(title) == '') {
							swal("请填写标题!");
							return false;
						}
						if ($.trim(content) == '') {
							swal("请填写内容!");
							return false;
						}
 						if(img.length>0){
 							imgstr='';
 							for(var i = 0;i<img.length;i++){
 								if(i==0){imgstr+=img[i]}
 								else{imgstr+=','+img[i]}
 							}
 							
						} 
						$.ajax({
									type : "POST",
									url : "<%=basePath%>/joinVote.htm?d="+ new Date(),
									data : {
										name : itemname,
										mobile : mobile,
										title : title,
										address : address,
										img:imgstr,
										content:content
									},
									timeout : 60000,
									async : true,
									beforeSend : function() {
										//缓冲提示
										_showLoading();
									},
									success : function(data) {
										_hideLoading();
										//var data = eval("(" + data + ")");
										if (data=="success") {
											swal(
												{   
													title: "报名成功",   
													text: "赶紧喊上你的小伙伴帮你投票吧！",   
													type: "success",   
													confirmButtonColor: "#DD6B55",   
													confirmButtonText: "确定",   
													closeOnConfirm: false 
												}, 
												function(){   
													window.location.href = "<%=basePath%>/vote.htm";
												}
											);
											
											
											<%-- swal("报名成功,赶紧喊上你的小伙伴帮你投票吧！"
												 ,function(){location.href="<%=basePath%>/sub.htm";}
											); --%>
											<%-- window.location.href = "<%=basePath%>/vote.htm"; --%>
										} else {
											swal("报名失败,您可以直接联系我们客服报名！");
										}
									},
									error : function(XMLHttpRequest,
											textStatus, errorThrown) {
										swal("出错:" + XMLHttpRequest.readyState);
									}
								})
					})
	function bindDelete() {
		$(".close").click(function() {
			img.splice($(this).parent().index(),1);
			$(this).parent().remove();
		})
	}
</script>
</html>